<!DOCTYPE html>
<html>
<head>
<style>
#textcontent { 
    width: 100%;
    height: 400px;
}
#show {
	width: 400px;
	height: auto;
	word-wrap:break-word;
	background-color: red;
	overflow-x:auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
	$(document).ready(function(){
	    $("#textcontent").change(function(){
			var textshow = $("#textcontent").val();
			$("#show").text(textshow);
			alert($("#show").html());
			$("#show2").html($("#show").val());
    	});
	});
</script>
</head>
<body>
<pre>
<p id="show"></p>
</pre>
<div id="content">
	 <textarea id="textcontent"></textarea> 
</div>
<pre id="show2"></pre>
</body>
</html>





<!-- test
A pre element is displayed like this:
<?php
/*
if(is_dir("controllers")){
	echo "controllers existed<br/>";
}
if(file_exists("controllers/index.php")){
	echo "controllers index.php existed<br/>";
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
if(1){
	echo 'lichcse</br>';
}
echo $_SERVER['SERVER_NAME'];
phpinfo();
*/
?>
Change the default CSS settings to see the effect.
-->
